<template>
  <div class="age-water">
    <div class="wu-chart" ref="wuChartRef"></div>
  </div>
</template>

<script setup lang="ts">
import { setAutoHoverIntervalFun } from '@/utils/echartUtils'
import * as echarts from 'echarts'
let wuChartRef = ref<HTMLDivElement>()
let wuChart = null
interface ChartProp {
  value: number
  name: string
  percentage: string
}

let pieData: ChartProp[] = [
  { value: 200, name: '10岁以下', percentage: '16%' },
  { value: 110, name: '10 - 18岁', percentage: '8%' },
  { value: 150, name: '18 - 30岁', percentage: '12%' },
  { value: 310, name: '30 - 40岁', percentage: '24%' },
  { value: 250, name: '40 - 60岁', percentage: '20%' },
  { value: 260, name: '60岁以上', percentage: '20%' }
]

const colors = [
  '#F6C95C',
  '#EF7D33',
  '#1F9393',
  '#184EA1',
  '#81C8EF',
  '#9270CA'
]

const options: echarts.EChartOption = {
  color: colors,
  tooltip: {
    trigger: 'item',
    formatter: (param) => {
      const { name, data, marker } = param as {
        name: string
        data: ChartProp
        marker: string
      }

      return `<div class="chart-tooltip">
          ${marker}<span>${name}  ${data.value}  ${data.percentage}</span>
        </div>`
    },
    extraCssText: 'background: transparent;padding: 0;border:none;'
  },
  legend: {
    orient: 'vertical',
    top: '5%',
    // left: 'right',
    right: 10,
    textStyle: {
      color: '#fff'
    },
    align: 'left',
    itemWidth: 15,
    itemHeight: 15,
    itemGap: 15,
    formatter: function (name) {
      const percent = pieData.find((item) => item.name === name)
      return `${name}   ${percent?.percentage}`
    }
  },
  grid: {
    left: 0,
    right: 20,
    top: 0,
    bottom: 0
  },
  series: [
    {
      type: 'pie',
      center: ['40%', '55%'],
      radius: ['40%', '85%'],
      z: 5,
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderWidth: 3
      },
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
        formatter: (param: any) => {
          const { data } = param as {
            data: ChartProp
          }
          return data.percentage
        }
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: pieData
    },
    {
      name: '本日总数',
      type: 'pie',
      center: ['40%', '55%'],
      radius: ['40%', '85%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        // borderColor: '#fff',
        borderWidth: 3
      },
      label: {
        show: true,
        position: 'center',
        color: '#5e83a4',
        fontSize: 14,
        formatter: '本日总额'
      },

      labelLine: {
        show: false
      },
      data: pieData
    }
  ]
}
let stopFun: Function
onMounted(() => {
  wuChart = echarts.init(wuChartRef.value)
  wuChart.setOption(options)
  const { init, stop } = setAutoHoverIntervalFun(wuChart, pieData)
  init()
  stopFun = stop
})
onUnmounted(() => {
  stopFun()
})
</script>

<style lang="scss" scoped></style>
